<template>
	<section>
		<el-row>
			<el-col :span="6" class="col left-col">
				<el-tree :data="productTypes" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
			</el-col>
			<el-col :span="18" class="col"></el-col>
		</el-row>
	</section>
</template>

<script>
	export default {
        data() {
            return {
                productTypes: [],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                }
            };
        },
        methods: {
            handleNodeClick(data) {
                console.log(data);
            },
			//加载树的数据
			loadProductTypes(){
                this.$http.get("/product/productType/loadTree")
					.then(res=>{
					    this.productTypes = res.data;
					})
			}
        },
		mounted(){
            this.loadProductTypes();
		}
	}

</script>

<style scoped>
	.col{
		margin-top: 5px;
		height:500px;
		border:1px solid #ccc;
	}
	.left-col{
		border-right: none;
		overflow: auto; /*内容溢出自动显示滚动条*/
	}
</style>